<style>
  table {
    border-collapse: collapse;
    margin-top: 12px;
  }

  thead {
    background-color: rgb(240, 240, 240);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }

  th:first-child,
  td:first-child {
    border-inline-end: 1px solid rgba(0, 0, 0, .06);
  }

  th,
  td {
    padding: 12px;
    text-align: start;
  }

  th:nth-child(2) {
    min-width: 100px;
  }

  th:nth-child(3) {
    min-width: 500px;
  }

  tbody tr:hover {
    background-color: rgb(250, 250, 250);
  }

  td.pass {
    color: green;
  }

  td.fail {
    color: red;
  }

</style>

<div>
  <h1 id="title">[[title_]]</h1>

  <template is="dom-if" if="[[showContentsPage_]]">
    <ul>
      <li><a href="/parallels">[[getTitle("pluginVmAppName")]]</a></li>
    </ul>
  </template>

  <template is="dom-if" if="[[!showContentsPage_]]">
    <template is="dom-if" if="[[diagnostics_.topError]]">
      <div id="top-error">
        [[formatTopErrorMessage(diagnostics_.topError.message)]]
        <a href$="[[diagnostics_.topError.learnMoreLink.url]]"
            hidden$="[[!diagnostics_.topError.learnMoreLink]]">
          $i18n{learnMoreLabel}
        </a>
      </div>
    </template>
    <table>
      <thead>
        <tr>
          <th>$i18n{requirementLabel}</th>
          <th>$i18n{statusLabel}</th>
          <th>$i18n{explanationLabel}</th>
        </tr>
      </thead>
      <tbody>
        <template is="dom-repeat" items="[[diagnostics_.entries]]">
          <tr>
            <td>[[item.requirement]]</td>
            <td class$="[[statusToClass(item.status)]]">
              [[statusToString(item.status)]]
            </td>
            <td>
              <template is="dom-if" if="[[item.explanation]]">
                [[item.explanation.message]]
                <a href$="[[item.explanation.learnMoreLink.url]]"
                   hidden$="[[!item.explanation.learnMoreLink]]">
                  $i18n{learnMoreLabel}
                </a>
              </template>
            </td>
          </tr>
        </dom-repeat>
      </tbody>
    </table>
  </template>
</div>
